.PQIStaModule {
  &.globeDataPanel {
    top: -100px;
    &.open {
      top: @SYSMARGINTOP + 75 + 10;
    }
  }
  &.globeButtonPanel {
    left: @SYSMARGINLEFTPANEL;
    right: @SYSMARGINRIGHTPANEL;
    bottom: -100px;
    &.open {
      bottom: @SYSMARGINBOTTOM;
      &.statisticsOpen {
        bottom: @SYSMARGINBOTTOM + @SYSMARGIN + 370;
      }
    }
  }
  &.statisticsPanel {
    left: @SYSMARGINLEFT;
    right: @SYSMARGINRIGHT;
    bottom: -1000px;
    padding: 20px;
    &.open {
      bottom: @SYSMARGINBOTTOM;
    }
    display: flex;
    .chartBlock {
      margin-right: 15px;
    }
    .statisticsTableBlock {
      margin-top: 0;
      > .title {
        display: none;
      }
      flex: 1;
      > .wrap {
        height: 332px;
        display: flex;
        flex-direction: column;
        table {
          width: 100%;
          border-spacing: 0;
          border-collapse: collapse;
          border: 0;
          thead, tbody, tfoot {
            tr {
              th, td {
                padding: 5px;
                border: 1px solid fade(@color-white, 30);
                text-align: center;
              }
            }
          }
          thead {
            tr {
              th {
                background-color: fade(@theme, 10);
                font-weight: normal;
                color: @themeButtonBlue;
              }
            }

          }
          tbody {
            tr {
              margin-top: -1px;
              color: @color-white;
              &:nth-child(odd) {
                background-color: fade(@theme, 5);
              }
              &:nth-child(even) {
              }
              td {
                border-left: none;
                border-top: none;
                &:first-child {
                  border-left: 1px solid fade(@color-white, 30);
                }
                &.active, &:hover {
                  background-color: fade(@theme, 80);
                }
                &.level {
                  .rel;
                  padding-left: 15px;
                  &:before {
                    content: "";
                    display: block;
                    .abs;
                    left: 5px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 5px;
                    height: 15px;
                    background-color: #00BFFF;
                    border-radius: 5px;
                  }
                  &.level1 {
                    &:before {
                      background-color: #0f0;
                    }
                  }
                  &.level2 {
                    &:before {
                      background-color: #00beff;
                    }
                  }
                  &.level3 {
                    &:before {
                      background-color: #ffff00;
                    }
                  }
                  &.level4 {
                    &:before {
                      background-color: #ff8b00;
                    }
                  }
                  &.level5 {
                    &:before {
                      background-color: #ff0000;
                    }
                  }
                }
                &.noData {
                  opacity: 0.5;
                  &:before {
                    content: "-";
                  }
                }
              }
            }
          }
        }
      }
    }

  }
  &.stakeNumPanel {
    height: 70px;
    left: @SYSMARGINLEFTPANEL;
    right: @SYSMARGINRIGHTPANEL;
    top: -70px;
    &.open {
      top: @SYSMARGINTOP;
    }
    .grid {
      top: 15px;
      .rule {
        top: 25px;
      }
      .node {
        top: 29px;
        &.current {
          .line {
            height: 35px;
          }
        }
        &.viewport {
          .line {
            height: 35px;
          }
        }
      }
      .stakeNumPeriodData {
        display: flex;
        flex-direction: column-reverse;
        height: 15px;
        justify-content: space-between;
        .line {
          .nosel;
          display: flex;
          .lineNode {
            height: 5px;
            margin: 0 1px;
            border-radius: 5px;
            flex: 1;
            background-color: fade(lighten(@color-black, 50%), 50%);
          }
        }
      }

    }
  }
  &.compareChartPanel {
    display: flex;
    flex-direction: column;
    .block {
      .wrap {
        padding: 0;
        padding-right: 5px;
      }
      display: flex;
      flex-direction: column;
      table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        border: 0;
        thead, tbody, tfoot {
          tr {
            th, td {
              padding: 5px;
              border: 1px solid fade(@color-white, 30);
              text-align: center;
            }
          }
        }
        thead {
          tr {
            th {
              background-color: fade(@theme, 10);
              font-weight: normal;
              color: @themeButtonBlue;
            }
          }
        }
        tbody {
          tr {
            margin-top: -1px;
            color: @color-white;
            &:nth-child(odd) {
              background-color: fade(@theme, 5);
            }
            &:nth-child(even) {
            }
            td {
              border-left: none;
              border-top: none;
              &:first-child {
                border-left: 1px solid fade(@color-white, 30);
              }
            }
          }
        }
      }
      &.compareTableBlock {
        tbody {
          td:not(:first-child) {
            &.active, &:hover {
              background-color: fade(@theme, 80);
            }
          }
        }
      }
      &.compareListBlock {
        flex: 1;
        overflow: auto;
        tbody {
          tr {
            &:hover {
              background-color: fade(@theme, 80);
            }
          }
        }
      }
    }

  }
}

.PQIBlock {
  > .wrap {
    width: 400px;
    .folder {
      > .label {
      }
      > .child {
        flex-direction: row !important;
        flex-wrap: wrap;
      }
      &.more {
        margin: 0;
        > .label {
          width: 80px;
          text-align: center;
          padding: 0;
          padding-right: 10px;
          background-color: fade(@theme, 80);
          border-radius: 0 0 5px 5px;
          margin: auto;
          color: @color-white;
          .rel;
          &:after {
            content: "";
            display: block;
            .abs;
            right: 5px;
            top: 5px;
            width: 10px;
            height: 10px;
            background-image: url(../img/icon/openarrow_10.png);
            opacity: 0.8;
          }
        }
        > .child {
          overflow: hidden;
          > .folder {
            > .label {
              font-size: 12px;
              opacity: 0.8;
              padding-left: 15px;
              .rel;
              &:before {
                content: "";
                display: block;
                .abs;
                left: 5px;
                top: 50%;
                transform: translateY(-50%);
                width: 3px;
                height: 15px;
                background-color: @theme;
                border-radius: 5px;
              }
            }
            > .child {
              margin-top: 5px;
              .item {
                opacity: 0.8;
                padding: 0;
                > .label {
                  //display: none;
                }
                > .value {
                  white-space: normal;
                  font-size: 12px;
                  color: fade(@color-white, 60);
                }
                width: 100%;
              }
            }
          }
        }
        &.close {
          > .label {
            &:after {
              transform: rotateZ(180deg);
            }
          }
          > .child {
            height: 0;
          }
        }
      }
    }
    .item {
      width: 50%;
      > .label {
      }
      > .value {
      }
    }
    .param {
      flex-direction: row !important;
      .levelChart {
        width: 50%;
      }
      .folder {
        width: 50%;
        .item {
          .label {
            width: 60px;
            color: @themeTextGreen;
          }
        }
      }
    }
    .year {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      border: 0;
      thead, tbody, tfoot {
        tr {
          th, td {
            padding: 5px;
            border: 1px solid fade(@color-white, 30);
            text-align: center;
          }
        }
      }
      thead {
        tr {
          th {
            background-color: fade(@theme, 10);
            font-weight: normal;
            color: @themeButtonBlue;
          }
        }
      }
      tbody {
        tr {
          margin-top: -1px;
          color: @color-white;
          &:nth-child(odd) {
            background-color: fade(@theme, 5);
          }
          &:nth-child(even) {
          }
          td {
            border-left: none;
            border-top: none;
            &:first-child {
              border-left: 1px solid fade(@color-white, 30);
            }
          }
        }
      }
      .up, .down {
        .rel;
        padding-right: 10px;
        &:after {
          content: "";
          display: block;
          .abs;
          right: 3px;
          width: 6px;
          height: 5px;
          background-repeat: no-repeat;
          background-image: url("../img/icon/new/updownArrow.png");
        }
      }
      .up {
        &:after {
          top: 10px;
          background-position: top;
        }
      }
      .down {
        &:after {
          bottom: 9px;
          background-position: bottom;
        }
      }
    }
  }
}

.levelChart {
  width: 130px;
  height: 130px;
  background-image: url("../img/levelChartBG.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .rel;
  .level {
    font-size: 24px;
    margin-top: 32px;
  }
  .label {
    font-size: 14px;
    color: @color-white;
    font-family: "Arial Bold";
    font-weight: bold;
    margin-top: 7px;
    .text-shadow();
  }
  .value {
    font-size: 18px;
    font-family: "Arial Bold";
    font-weight: bold;
    .text-shadow();
  }
  .arrow {
    .abs;
    left: 50%;
    top: 50%;
    transform-origin: bottom center;
    width: 0;
    height: 0;
    overflow: visible;
    &:before {
      content: "";
      display: block;
      .abs;
      left: -5px;
      bottom: 0;
      width: 10px;
      height: 40px;
      background-image: url("../img/levelChartArrow.png");
      background-repeat: no-repeat;
      background-size: contain;
      transform-origin: bottom;
    }
  }
  &.level1 {
    .level {
      color: #6c0
    }
    .value {
      color: #6c0
    }
    .arrow {
      &:before {
        transform: rotate(120deg);
      }
    }
  }
  &.level2 {
    .level {
      color: #09f
    }
    .value {
      color: #09f
    }
    .arrow {
      &:before {
        transform: rotate(60deg);
      }
    }
  }
  &.level3 {
    .level {
      color: #ff0
    }
    .value {
      color: #ff0
    }
  }
  &.level4 {
    .level {
      color: #f90
    }
    .value {
      color: #f90
    }
    .arrow {
      &:before {
        transform: rotate(-60deg);
      }
    }
  }
  &.level5 {
    .level {
      color: #f00
    }
    .value {
      color: #f00
    }
    .arrow {
      &:before {
        transform: rotate(-120deg);
      }
    }
  }
}
